<template>
  <view class="container">
    <div v-if="flag == '合同签约'">
      <view class="cards" v-if="flag == '合同签约'" @click="goAddContract">
        <view class="topFlex">
          <view>新增签约</view>
          <view class="addS">新增</view>
        </view>
      </view>
      <view class="info_box" v-for="(i, index) in list" :key="index">
        <view class="info_title"> <text>{{ i.id }}</text>
          <!-- <text class="flag_box" v-if="i.plantSigned == 0">待对方签约</text>
        <text class="flag_box" v-if="i.plantSigned == 1">对方已签约</text>
        <text class="flag_box" v-if="i.farmSigned == 0">待签约</text>
        <text class="flag_box" v-if="i.farmSigned == 1">己方已签约</text> -->

          <text class="flag_box">
            {{ i.farmSigned == 0 ? '待签约' : '待对方签约' }}
          </text>
        </view>
        <view>
          <view class="info_content">
            <text> 合同开始时间 </text>
            <text> {{ i.beginDate || "-" }} </text>
          </view>
          <view class="info_content" style="padding-bottom: 20rpx">
            <text> 合同结束时间 </text>
            <text> {{ i.endDate || "-" }} </text>
          </view>
          <u-button text="去查看" color="#000000" style="margin-top: 50rpx" @click="look(i)"></u-button>
        </view>
      </view>
    </div>
    <div v-if="flag == '合同签约'&&list.length == 0" >
        <div style="text-align: center;">暂无合同</div>
    </div>
    <div v-if="flag == '当前合同'&&contractDetailList.length>0">
      <div class="card">
        <div class="inCard">
          <div class="flexTop">
            <div class="titleId">{{ info.id }}</div>
            <div class="statusSuccess">正在执行</div>
          </div>
        </div>
        <div class="inCard">
          <div style="height: 10px;"></div>
          <div class="flex">
            <div class="title">合同开始时间</div>
            <div>{{ info.beginDate }}</div>
          </div>
          <div style="height: 10px;"></div>
          <div class="flex">
            <div class="title">合同结束时间</div>
            <div>{{ info.endDate }}</div>
          </div>
        </div>
        <div class="inCard">
          <div style="height: 10px;"></div>
          <div v-for="item in contractDetailList">
            <div class="flex">
              <div class="title">有机质</div>
              <div>{{ item.organicType }}</div>
            </div>
            <div style="height: 10px;"></div>
            <div class="flex">
              <div class="title">处理费用</div>
              <div>{{ item.treatmentExpense }}元/吨</div>
            </div>
            <div style="height: 10px;"></div>
            <div class="flex">
              <div class="title">收运费用</div>
              <div>{{ item.transportationExpense }}元/吨</div>
            </div>
            <div style="height: 10px;"></div>
          </div>
        </div>
        <div style="height: 20px;"></div>
        <div class="lookCons" @click="lookFiles(info)">污水合同查看</div>
        <div style="height: 10px;"></div>
        <div class="lookCon" @click="lookFile(info)">粪污合同查看</div>

      </div>
    </div>
    <div v-if="flag == '当前合同'&&contractDetailList.length == 0">
      暂无合同
    </div>
  </view>
  <!--<div class="container">
    <div v-for="item in list" style="margin-top: 10px;">
      <!~~ <div style="height: 30rpx;"></div>
          <div class="flex">
            <div>{{ item.beginDate }}{{ item.endDate }}</div>
            <div class="looks">合同查看</div>
            <div class="look" @click="look(item)">查看内容</div>
          </div>
          <div style="height: 30rpx;"></div> ~~>
      <div class="card">
        <div style="height:15rpx"></div>
        <div style="width:90%;margin-left: 5%;">
          <div style="font-size: 20px;font-weight: bold;">合同编号：{{ item.id }}</div>
          <div style="height: 10px;"></div>
          <div style="display: flex;align-items: center;justify-content: space-between;">
            <div>时间</div>
            <div>{{ item.beginDate }}-{{ item.endDate }}</div>
          </div>
          <div style="height: 10px;"></div>
          <div style="display: flex;align-items: center;justify-content: space-between;">
            <div>己方</div>
            <div>{{ item.farmSigned == 0 ? '未签约' : '已签约' }}</div>
          </div>
          <div style="height: 10px;"></div>
          <div style="display: flex;align-items: center;justify-content: space-between;">
            <div>对方</div>
            <div>{{ item.plantSigned == 0 ? '未签约' : '已签约' }}</div>
          </div>
          <div style="height: 10px;"></div>
          <div style="display: flex;align-items: center;justify-content: space-between;">
            <div class="lookCon" @click="lookFile(item)">查看粪污</div>
            <div style="width: 1%;"></div>
            <div class="lookCon" @click="lookFiles(item)">查看污水</div>
            <div class="looked" @click="looks(item)">查看内容</div>
            <div class="looked" @click="look(item)" v-if="item.farmSigned == 0">去签约</div>
          </div>
        </div>
        <div style="height:15rpx"></div>
      </div>
      <u-line color="#ffffff"></u-line>
    </div>

    <div style="height: 40rpx;"></div>
    <div class="btn" @click="addContract">新增签约</div>
    <div style="height: 40rpx;"></div>
  </div>-->
</template>
<script>
import { getSign, getSignContent } from '../api/api';
import request from '../../common/request';
export default {
  data() {
    return {
      list: [],
      request: request,
      base: '',
      flag: '',
      contractDetailList: [],
      info: {}
    };
  },
  methods: {
    // 年度报告
    look(i) {
      uni.setStorageSync('storage_key', 0);
      uni.navigateTo({
        url: `/pagesFarmer/index/content?id=${i.id}`
      })
    },
    looks(i) {
      uni.setStorageSync('storage_key', 1);
      uni.navigateTo({
        url: `/pagesFarmer/index/content?id=${i.id}`
      })
    },
    lookFile(i) {
      console.log(i);
      if (i.annex == '') {
        uni.showToast({
          title: '暂无合同',
          icon: 'none'
        });
      } else {
        const url = i.annex.split(',')
        console.log(this.base + '/' + url[0]);
        
        uni.downloadFile({ //通过uniapp的api下载下来
          url: this.base + '/' + url[0],
          success: function (res) {
            var filePath = res.tempFilePath;
            uni.openDocument({
              filePath: filePath,
              success: function (FileRes) {
                console.log('打开文档成功');
              }
            });
          }
        });
      }
      return;

    },
    lookFiles(i) {
      console.log(i);
      if (i.annex == '') {
        uni.showToast({
          title: '暂无合同',
          icon: 'none'
        });
      } else {
        const url = i.annex.split(',')
        console.log(this.base+'/'+url,'url');
        
        uni.downloadFile({ //通过uniapp的api下载下来
          url: this.base + '/' + url[1],
          success: function (res) {
            var filePath = res.tempFilePath;
            uni.openDocument({
              filePath: filePath,
              success: function (FileRes) {
                console.log('打开文档成功');
              }
            });
          }
        });
      }
      return;

    },
    lists(i) {
      getSign(i).then(res => {
        console.log(res.data, '签约列表');
        if (res.data.code == 200) {
          this.list = res.data.data;
          getSignContent(res.data.data[0].id).then(res => {
            console.log(res.data, 'res.data');
            if (res.data.code == 200) {
              this.info = res.data.data.contract;
              this.contractDetailList = res.data.data.contractDetailList;
              console.log(this.info, this.contractDetailList);

            }
          });
        }
      })
    },
    //新增签约
    goAddContract() {
      uni.navigateTo({
        url: '/pagesFarmer/index/addContract'
      })
    }
  },
  onShow() {

    this.base = this.request.config.baseURL;
  },
  onLoad(options) {
    this.flag = options.flag;
    if (options.flag == '合同签约') {
      this.lists(0);
    } else {
      this.lists(1);

      uni.setNavigationBarTitle({
        title: '当前合同'
      });
    }

  }
};
</script>
<style lang="scss">
// .container {
//   height: 100vh;
//   width: 100vw;
//   background: #f3f3f3;
//   color: #000000;
//   overflow-y: scroll;
// }

.look {
  padding: 3px;
  color: #fff;
  background: #46a164;
  border-radius: 5px;
  width: 20%;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #E5EDE3;
}

.looks {
  padding: 3px;
  color: #fff;
  background: #C1E1C9;
  border-radius: 5px;
  border: 0.5px solid #46a164;
  width: 20%;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #5F9F6A;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 95%;
  margin-left: 2.5%;
}

.btn {
  background: #5F9F6A;
  color: #fff;
  width: 90%;
  margin-left: 5%;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  width: 90%;
  // margin-left: 5%;
  background: #f4fbf3;
  border-radius: 10px;
}

.lookCon {
  color: #fff;
  background: #000000;
  border-radius: 5px;
  border: 1px solid #000000;
  width: 90%;
  margin-left: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;
}

.lookCons {
  color: #000000;
  background: #ffffff;
  border-radius: 5px;
  border: 1px solid #000000;
  width: 90%;
  margin-left: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;
}

.looked {
  padding: 5px;
  background: #5F9F6A;
  color: #fff;
  width: 30%;
  margin-left: 5%;
  // height: 40px;
  font-size: 13px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cards {
  padding: 10;
  width: 100%;
  box-sizing: border-box;
  padding: 40rpx;
  background: #ffffff;
  border-radius: 10px;
  margin-bottom: 20rpx;
}

.card {
  width: 90%;
  margin-left: 5%;
  background: #ffffff;
  border-radius: 10px;
  padding-top: 10px;
  padding-bottom: 10px;

  .inCard {
    width: 95%;
    margin-left: 2.5%;
  }
}

.flexTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 95%;
  margin-left: 2.5%;
}

.topFlex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: #000000;
  font-weight: 500;

}

.addS {
  background: #000000;
  border-radius: 6px;
  width: 60px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.container {
  min-height: 100vh;
  box-sizing: border-box;
  width: 100vw;
  padding: 20rpx;
  background: #f3f3f3;
  overflow-y: scroll;
}

.info_box {
  width: 100%;
  box-sizing: border-box;
  border-radius: 30rpx;
  background-color: #fff;
  padding: 40rpx;
  margin-bottom: 20rpx;

  .info_title {
    width: 100%;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid #f2f2f2;
    font-size: 36rpx;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .flag_box {
      width: 160rpx;
      font-size: 28rpx;
      font-weight: normal;
      height: 60rpx;
      border-radius: 8rpx;
      background: #dffcec;
      color: #000000;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .info_content {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
  }
}

.statusSuccess {
  width: 150rpx;
  height: 60rpx;
  background-color: #dffcec;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.titleId {
  font-size: 18px;
  font-weight: 500;
  color: #000000;
}
</style>